<template>
    <!-- 关注 -->
  <view class='attention_page' :style="{paddingTop:head_height+'px'}">
    <!-- 头部 -->
    <view class='head' :style='{top:nav_height+"px"}'>
      <view class='tab_box'>
        <view 
        :class='{tabBar_on:headTab_index == tab_index}'
        v-for='(tab_item,tab_index) in tab' :key='tab_index'
        @tap='switchTab(tab_index)'>{{tab_item}}</view>
      </view>
      <screen 
        :headTab_index='headTab_index' 
        :head_height='head_height'
        :class_arr="clas_arr"
        :class_index="class_index"
        :grade_arr="level_list"
        :dateIndex="dateIndex"
        :dateArr="dateArr"
        :date_openType="date_openType"
        :keyword='keyword'
        @selectRes="getSelectRes"
        @searchContent='search'
        @clickDate="clickDate"
        @date="getDate"
        >
      </screen>
    </view>

    <loading :status='load_status'></loading>
    <!-- 内容 -->
    <!-- :style='{height:content_height+"px"}' -->
    <swiper 
      class="swiper"
      @change='swiperChange' 
      :current='headTab_index'>
        <!-- 跟踪信息 -->
        <swiper-item class='swiper-item'>
          <view class='list0' v-if='headTab_index==0'>
            <list1 :list='track_list' @chang='listChange'></list1>
            <hint :status='hint_status'></hint>
          </view>
        </swiper-item>
        <!-- 重点源 -->
        <swiper-item class='swiper-item'>
          <view class='list1' v-if='headTab_index==1'>
            <list2 :list='keysource_list' @change='getListHeight'></list2>
            <hint :status='hint_status'></hint>
          </view>
        </swiper-item>
        <!-- @节点博主 -->
        <swiper-item class='swiper-item'>
          <view class='list2' v-if='headTab_index==2'>
            <list2 :list='nodeBlogger_list' @change='getListHeight'></list2>
            <hint :status='hint_status'></hint>
          </view>
        </swiper-item>
        <!-- 今日热榜 -->
        <swiper-item class='swiper-item'>
          <view class='list3' v-if='headTab_index==3'>
            <hot-list></hot-list>
          </view>
        </swiper-item>
        <!-- 收藏分享 -->
        <swiper-item class='swiper-item'>
          <view class='list4' v-if='headTab_index==4'>
            <list2></list2>
          </view>
        </swiper-item>
    </swiper>
    

    <!-- 悬浮按钮 -->
    <fab 
      :type='fab_type' 
      @clickFab='openPopup' 
      v-if='headTab_index == 0 || headTab_index == 3' 
      :head_height='head_height'
      :num="fab_num"
    ></fab>

    <!-- 今日热榜管理 -->
    <popup ref='set_popup'>
      <view class='hotList_set'>
        <view class='set_title'>今日热榜管理</view>
        <view class='set_list'>
          <select-item :mode='1' :list='hot_arr' @selected='getSelected'></select-item>
        </view>
        <view class='btn_box'>
          <button class='btn' @tap='closePopup'>取消</button>
          <button class='btn'>确定</button>
        </view>
      </view>
    </popup>

    <!-- 备注列表 -->
    <remark></remark>

  </view>
</template>

<script>

  import list1 from '../components/list1.vue'
  import list2 from '../components/list2.vue'
  import hotList from '../components/hotList.vue'
  import remark from '../components/remark.vue'
  import fab from '@/pages/common/fab.vue'

  export default {
    components: {
      list1,
      list2,
      hotList,
      fab,
      remark
    },
    props: {
      reach_bottom: Number,
      pull_down: Number,
    },
    data() {
      return {
        tab: ['跟踪信息','重点源','@节点博主','今日热榜','收藏分享'],
        headTab_index: 0,
        head_height: 0,
        content_height: 0,
        fab_type: 'new',
        trigger_status: false,
        det_type: 0,   // 文章详情类型
        fab_num: 0,

        hot_arr: ["新闻热榜","微博热榜","微信公众号热榜","澎湃热榜","今日头条热榜","抖音热榜","百度热榜","搜狐热榜","新浪热榜","网易新闻热榜","腾讯热榜","属地热榜"],
        load_status: 0,
        hint_status: 0,

        // 跟踪信息
        track_page: 1,
        track_total: 0,
        track_list: [],

        // 重点源
        keysource_page: 1,
        keysource_total: 0,
        keysource_list: [],
        group_list: [],    // 全部分类
        group_list2: [],    // 全部分类
        group_index: 0,
        groupId: "",
        level: "",
        level_list: [],
        keysource_dateIndex: 0,
        keysource_dateArr: [],
        keysource_keyword: '',

        // 节点博主
        nodeBlogger_list: [],
        endTime: "2020-05-20 23:59:59",
        startTime: "2020-04-01 00:00:00",
        blogger_dateIndex: 0,
        blogger_dateArr: [],
        blogger_list: [],
        blogger_list2: [],
        blogger_index: 0,
        blogger_groupId: null,
        blogger_keyword: "",

        keyword: "",
        clas_arr: [],
        class_index: 0,

        // 日期
        dateIndex: 0,
        dateArr: [],
        date_openType: 0,
      }
    },
    computed: {
      nav_height() {
        return this.$store.state.nav_height;
      },
      navTab_index() {
        return this.$store.state.navTab_index;
      },
    },
    watch: {
      nav_height() {
        this.computeHeadHeight()
      },
      navTab_index() {
        this.computeHeadHeight()
      },
      // 下拉刷新
      pull_down() {
        this.load_status = 1;
        switch(this.headTab_index) {
          case 0:
            // 跟踪信息
            this.getTrack('down')
          break;
          // 重点源
          case 1:
            this.initKeysource()
          break;
          // 节点博主
          case 2:
            this.getNodeBlogger("down")
          break;
          // 今日热榜
          case 3:
            this.load_status = 2;
            uni.stopPullDownRefresh();
          break;
          // 收藏分享
          case 4:
            this.load_status = 2;
            uni.stopPullDownRefresh();
          break;
        }
      },
      // 滚动到底部
      reach_bottom() {
        switch(this.headTab_index) {
          case 0:
          break;
          // 重点源
          case 1:
            if(this.keysource_list.length >= this.keysource_total) {
              this.hint_status = 2;
              return
            }
            this.keysource_page++;
            this.getKeysource();
          break;
        }
      },
      // 监控tab切换
      headTab_index(index) {
          switch (index) {
            case 0:
              
            break;
            case 1:
              // 重点源
              this.keyword = this.keysource_keyword;
              if(this.group_list.length == 0) {
                this.getClassList();
                this.getLevelList();
              }else {
                this.class_index = this.group_index;
                this.clas_arr = this.group_list2;
              }
              if(this.keysource_total == 0) {
                this.load_status = 1;
                this.getKeysource("down")
              }
            break;
            case 2:
              // 节点博主
              this.keyword = this.blogger_keyword;
              if(this.blogger_list.length == 0) {
                this.getBloggerClass()
              }else {
                this.class_index = this.blogger_index;
                this.clas_arr = this.blogger_list2;
              }
              if(this.nodeBlogger_list.length == 0) {
                this.load_status = 1;
                this.getNodeBlogger("down")
              }
              
            break;
          }
          uni.pageScrollTo({
            scrollTop: 0,
            duration: 300
          });
      }
    },
    mounted() {
      this.computeHeadHeight();
      this.getTrack();
    },
    methods: {
      // 获取跟踪信息数据
      getTrack(type="") {
        this.hint_status = 1;
        this.$http({
          url: this.$api.attention.track,
        }).then( res => {
          if(res.code == 0) {
            this.hint_status = 2;
            if(type == "down") {
              this.track_list = [];
              uni.stopPullDownRefresh();
              this.load_status = 2;
            }
            this.track_total = res.data.total;
            this.fab_num = res.data.total;
              res.data.list.forEach(val => {
                val.height = 0;
                val.show = false;
                this.track_list.push(val)
              });
            this.getListHeight();
          }
        })
      },
      // 获取重点源数据
      getKeysource(type="") {
        this.hint_status = 1;
        this.$http({
          url: this.$api.attention.keysource,
          data: {
            startTime: this.keysource_dateArr[0],
            endTime: this.keysource_dateArr[1],
            groupId: this.groupId,
            level: this.level,
            keyword: this.keysource_keyword,
            pageIndex: this.keysource_page,
            pageSize: 10,
            type: ["1", "2"]
          }
        }).then( res => {
          if(res.code == 0) {
            this.hint_status = 2;
            if(type == "down") {
              this.keysource_list = [];
              uni.stopPullDownRefresh();
              this.load_status = 2;
              uni.pageScrollTo({
                scrollTop: 0,
                duration: 300
              });
            }
            this.keysource_total = res.data.total;
            if(res.data.total != 0) {
              res.data.list.forEach(val => {
                  val.img_num = 3;
                  this.keysource_list.push(val)
              });
            }else {
              this.hint_status = 0;
            }
            this.getListHeight();
          }else {
            this.hint_status = 0;
            this.load_status = 3;
          }
        })
      },
      // 获取节点博主数据
      getNodeBlogger(type="") {
        this.hint_status = 1;
        this.$http({
          url: this.$api.attention.nodeBlogger,
          data: {
            groupId: this.blogger_groupId,
            endTime: this.blogger_dateArr[1],
            keyword: this.blogger_keyword,
            startTime: this.blogger_dateArr[0],
          }
        }).then( res => {
          if(res.code == 0) {
            if(type == "down") {
              this.nodeBlogger_list = [];
              uni.stopPullDownRefresh();
              this.load_status = 2;
            }
            this.hint_status = 2;
            if(res.data.length == 0) {
              this.hint_status = 0;
            }
            res.data.forEach(val => {
                val.img_num = 3;
                this.nodeBlogger_list.push(val)
            });
            this.getListHeight();
          }
        })
      },
      // 获取重点源全部分类
      getClassList() {
        this.$http({
          url: this.$api.attention.group_list,
          data: {
            type: 2,
          }
        }).then( res => {
          if(res.code == 0) {
            this.group_list = res.data;
            this.group_list2.push('全部分类')
            res.data.forEach( val => {
              this.group_list2.push(val.groupName)  
            })
            this.class_index = 0;
            this.clas_arr = this.group_list2;
          }
        })
      },
      // 获取节点博主全部分类
      getBloggerClass() {
        this.$http({
          url: this.$api.attention.group_list,
          data: {
            type: 3,
          }
        }).then( res => {
          if(res.code == 0) {
            this.blogger_list = res.data;
            this.blogger_list2.push('全部')
            res.data.forEach( val => {
              this.blogger_list2.push(val.groupName)  
            })
            this.class_index = 0;
            this.clas_arr = this.blogger_list2
          }
        })
      },
      // 获取全部等级
      getLevelList() {
        this.$http({
          url: this.$api.attention.level_list,
        }).then( res => {
          if(res.code == 0) {
            this.level_list.push('全部等级')
            res.data.forEach( val => {
              this.level_list.push(val.level)  
            })
          }
        })
      },
      // 重新请求重点源
      initKeysource() {
        this.keysource_page = 1;
        this.getKeysource("down");
      },
      // 切换tabbar
      switchTab(index) {
        this.headTab_index = index;
        this.$nextTick(() => {
          this.computeHeadHeight();
        })
        if(index == 0) {
          this.fab_type = 'new'
        }
        if(index == 3) {
          this.fab_type = 'set'
        }
        this.getListHeight()
      },
      // 翻页
      swiperChange(e) {
        this.switchTab(e.detail.current)
      },
      // 获取全部分类、全部等级选择结果
      getSelectRes(e) {
        this.load_status = 1;
        if(e.type == "class") {
          this.class_index = e.index;
          if(this.headTab_index == 1) {
            this.group_index = e.index;
            e.index == 0 ? this.groupId = "" : this.groupId = this.group_list[e.index-1].groupId;
          }
          if(this.headTab_index == 2) {
            this.blogger_index = e.index;
            e.index == 0 ? this.blogger_groupId = null : this.blogger_groupId = this.blogger_list[e.index-1].groupId;
          }
          
        }
        if(e.type == "level") {
          e.index == 0 ? this.level = "" : this.level = e.content;
        }
        if(this.headTab_index == 1) {
          this.initKeysource();
        }
        if(this.headTab_index == 2) {
          
          this.getNodeBlogger("down")
        }
        
      },
      // 搜索
      search(e) {
        this.load_status = 1;
        switch(this.headTab_index) {
          case 1: 
          // 重点源搜索
          this.keysource_keyword = e;
          this.initKeysource();
          break;
          case 2: 
          // 博主节点搜索
          this.blogger_keyword = e;
          this.getNodeBlogger("down")
          break;
        }
      },
      // 点击日历图标
      clickDate() {
        switch (this.headTab_index) {
          case 1: 
            // 重点源
            this.dateIndex = this.keysource_dateIndex;
            this.dateArr = this.keysource_dateArr;
            this.date_openType = 0;
          break;
          case 2: 
            // 节点博主
            this.dateIndex = this.blogger_dateIndex;
            this.dateArr = this.blogger_dateArr;
            this.date_openType = 1;
          break;
        }
      },
      // 获取日期范围
      getDate(e) {
        this.load_status = 1;
        this.dateIndex = e.date_index;
        switch (this.headTab_index) {
          case 1: 
            this.keysource_dateIndex = e.date_index;
            this.keysource_dateArr = e.date;
            this.initKeysource();
          break;
          case 2: 
            this.blogger_dateIndex = e.date_index;
            this.blogger_dateArr = e.date;
            this.getNodeBlogger('down');
          break;
        }
      },
      // 选择热榜管理
      getSelected(e) {
        console.log(e)
      },
      // 打开弹窗
      openPopup() {
        this.$refs.set_popup.show();
      },
      // 关闭弹窗
      closePopup() {
          this.$refs.set_popup.close();
      },
      // 计算页面头部高度和内容
      async computeHeadHeight() {
        let info = await this.$getDomInfo(".head");
        this.head_height = this.nav_height + info.dom_info.height;
        this.content_height = info.window_info.windowHeight - this.head_height;
      },
      // 获取列表高度
      getListHeight() {
        this.$nextTick(async () => {
          let class_name = ".list"+this.headTab_index;
          this.content_height = await this.$getDomInfo(class_name,"height");
        })
      },
      listChange(h){
        this.getListHeight();
      }
    }
  }
</script>

<style lang="scss" scoped>
.attention_page {
  width: 100%;
  box-sizing: border-box;
}
.swiper-item {
  >view {
    min-height: 60vh;
    padding-bottom: 100upx;
    box-sizing: border-box;
  }
}
</style>